<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition>

	<c:if test="#{empty modal or modal eq 'true'}">

    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/panel/js/Modal.js"></script>


		<script type="text/javascript">
	
	 		//gerar uma variável de instância com nome dinâmico, para não ter sua instância modificada por outros possiveis paineis
	 		var #{id}Modal = new Modal("#{id}");
	 		var config = {};
	 			
	 		<c:if test="#{not empty backdrop}">
	 			$.extend(config, {"backdrop" : #{backdrop}});
	 		</c:if>
	
	 		<c:if test="#{not empty keyboard}">
				$.extend(config, {"keyboard" : #{keyboard}});
			</c:if>
	
			<c:if test="#{not empty show}">
				$.extend(config, {"show" : #{show}});
			</c:if>

			#{id}Modal.setConfig(config);
			
			//limpar os atributos
			<c:set var="backdrop" value=""/>
			<c:set var="keyboard" value=""/>
			<c:set var="show" value=""/>
	  
	  	</script>
	  	
	</c:if>
        
    <!-- PAINEL MODAL -->
    <c:if test="#{empty modal or modal eq 'true'}">
        
    	<!-- cria o atributo com um default se não foi passado -->
    	<c:if test="#{empty customClass}">
    		<c:set var="customClass" value="modal-content"/>
    	</c:if>
       	    	    
	  	<div id="#{id}" class="modal fade">
	  		<div style="width:#{width}px" class="modal-dialog">
	  		
	  			<!-- utiliza o atributo, sendo ele passado ou o default -->
	  			<div class="#{customClass}">
	  				<!-- entradas zeradas para não serem reutilizadas se houver outro painel no insert -->
	  				<c:set var="customClass" value=""/>
	  				<c:set var="width" value=""/>
	  				<ui:insert></ui:insert> 
	  			</div>
	  			
	  		</div>
	  	</div>
	  	
	 </c:if>
	 
	 <!-- PAINEL NÃO MODAL -->
	 <c:if test="#{modal eq 'false'}">
	 
	 	<c:if test="#{empty customClass}">
    		<c:set var="customClass" value="panel panel-default"/>
    	</c:if>

	  	<div id="#{id}" class="#{customClass}">
	  		<ui:insert></ui:insert>
	  	</div>

	 </c:if>
  	  
  <script type="text/javascript">

 	<c:if test="#{empty modal or modal eq 'true'}">

 		#{id}Modal.createModal();

	</c:if>
  
  </script>
  
  <c:set var="modal" value=""/>
  
</ui:composition>
   
</html>